<template>
  <div class="login">
    <div class="login-box">
      <!-- 右侧表单 -->
      <div class="login-left">
        <div class="login-left-box">
          <loginfrom>
            <template #inpfrom>
              <div class="login-left-head">登录</div>
              <div class="login-left-from" id="phone">
                <p>手机号/用户账号</p>
                <input type="text" v-model="phone"/>
                <p style="height:10px;color:red">{{phonegiveacue}}</p>
              </div>
              <div class="login-left-from">
                <p>密码</p>
                <input type="password" id="password" v-model="password" />
                <p style="height:10px;color:red">{{prosswordgiveacue}}</p>
                <button @click="loginbtn" style="outline:none;cursor: pointer;" class="loginbtn">登录</button>
                <p class="loginfoot">忘记密码</p>
              </div>
            </template>
          </loginfrom>
        </div>
      </div>
      <!-- 左侧图片 -->
      <div class="login-right">
        <img src="static/images/login/Group@2x.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import loginfrom from "@/components/login/loginfrom";
export default {
  name: "login",
  components: {
    loginfrom,
  },
  data() {
      return {
         // 模拟token
          logintoken:"token",

          //模拟账号
          imitatephone:12345678900, //模拟手机号
          imitatepassword:12345678900,//模拟密码
          
          phonegiveacue:null, //手机号错误提示
          prosswordgiveacue:null, //密码错误提示

          phone:null,//手机号
          password:null,//密码
      }
  },
  methods:{
      loginbtn(){
          let imitatepassword=localStorage.getItem("imitatepassword")
          let imitatephone=localStorage.getItem("imitatephone")
          var phonestr= /^0{0,1}(1[0-9][0-9]|15[7-9]|153|156|18[7-9])[0-9]{8}$/
          var passwordstr=/^(\w){6,20}$/
          if(this.phone===null){
              this.phonegiveacue="手机号或用户名不能为空!"
          }else if(!phonestr.test(this.phone)){
              this.phonegiveacue="手机号或用户名输入有误!"
          }else if(this.password===null){
              this.phonegiveacue=null
              this.prosswordgiveacue="密码不能为空!"
          }else if(!passwordstr.test(this.password)){
              this.phonegiveacue=null
              this.prosswordgiveacue="密码必须是6-20位数字或字母!"
          }else if(this.phone==imitatephone && this.password==imitatepassword){
              //当输入的手机号和密码与本地存储的手机号与密码匹配时进入修改密码页面 
              //并且在localStorage存储一个token 凭借token 对任何页面放行
              this.prosswordgiveacue=""
              localStorage.setItem("logintoken",this.logintoken)

             //如果时初次登录跳转修改密码页初始密码 
             //当不是初次登录的话,跳转到首页
             let imitatepassword = localStorage.getItem("imitatepassword")
             if (imitatepassword==this.imitatepassword) { 
                this.$router.push("Modifypassword")
              }else{
                this.$router.push("home/")
              }

          }else{
              this.prosswordgiveacue="密码或手机号输入错误！"
          }
      }
  },         
  mounted() {
      console.log(this.$md5('holle'));

      //当没有登录过的话就初始化账号和密码
      let logintoken=localStorage.getItem("logintoken")
      if(!logintoken){
        //模拟账号
      localStorage.setItem("imitatephone",this.imitatephone)
      localStorage.setItem("imitatepassword",this.imitatepassword)
      }
      
      
  },
};
</script>




<style lang="less" scoped>
#password {
  // background: #fafbfc url(/static/images/login/password.png) no-repeat 219px 8px;
  background-size: 13px;
  // height: 200px;
}
.login {
  border: none;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #b8d9ff;
  .login-box {
    margin: 0 auto;
    margin-top: 90px;
    height: 550px;
    width: 1000px;
    background-color: white;
    //右侧表单
    .login-left {
      float: left;
      width: 50%;
      height: 100%;
      //  登录
      .login-left-box {
        margin: 0 auto;
        width: 85%;
        //  头部
        .login-left-head {
          color: #4da1ff;
          text-align: center;
          font-weight: bold;
          margin-top: 80px;
          padding-bottom: 10px;
          border-bottom: 1px solid #f3f5f7;
        }
      }
    }
    // 左侧表单
    .login-right {
      float: left;
      width: 50%;
      height: 100%;
      background-color: yellow;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.loginfoot {
  margin-top: 10px;
  text-align: center;
}
</style>

